<template>
  <div class="patient-list-container">
    <div class="search">
      <input class="input" v-model="searchInfo" @keyup.enter="searchHandle" placeholder="请输入患者姓名"/>
    </div>
    <div class="patient-list" v-for="(item,index) in dataList.list" :key="index">
      <div class="patient-item" @click="router.push('/patient/desc/'+item.patientId)">
        <div class="left">
          <h1>{{ item.patientName }}</h1>
          <h2>
            <span>{{ item.patientSex }}</span>
            <span>{{ item.patientAge }} </span>
            <span>身高：{{ item.height }}cm</span>
            <span>体重{{ item.weight }}kg</span>
          </h2>
          <el-button class="button" size="small" round color="#e8bf6a"> {{ item.disease }}</el-button>
        </div>
        <div class="right">
          <p><span></span>
            <el-icon>
              <ArrowRight/>
            </el-icon>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import patientAxios from "@/api/patient.js"
import {onMounted, reactive, ref} from "vue";
import {useRouter} from 'vue-router'
import {useDataStore} from "@/stores/dataStore"

const dataStore = useDataStore()

const router = useRouter()
//传递过来的数据
// const props = defineProps(['list'])
//初始化分页查询数据
const dataList = reactive({
  list: []
})
//初始化总条数
const totalData = ref(0)
//当前页
const currentPage = ref(1)
//初始化分页显示条数
const defaultPageSize = ref(100)
//搜索初始化状态
const searchInfo = ref("")
/**
 * 网路请求：分页查询
 *  */
const http = () => {
  patientAxios.patient_search({
    search: searchInfo.value,
    page: currentPage.value,
    size: defaultPageSize.value
  }).then(res => {
    if (res.data.code == 200) {
      dataList.list = res.data.data.records
      totalData.value = res.data.data.total
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
onMounted(() => {
  http()
})
/**
 * 搜索按钮
 */
const searchHandle = () => {
  http()
}
</script>
<style scoped lang="scss">
.patient-list-container {
  background-color: #ffffff;
  height: 700px;
  padding-bottom: 100px;
}

.search {
  display: flex;
  height: 32px;
  padding: 8px;

  .input {
    opacity: .6;
    width: 100%;
    border: none;
    border-radius: 15px;
    background-color: #f1f1f1;
    padding: 16px;
  }
}

.patient-list {
  padding: 10px;

  .patient-item {
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    width: 100%;

    .left {
      width: 90%;

      h1 {
        margin-left: 1px;
        font-weight: bolder;
        margin-bottom: 5px;
      }

      h2 {
        margin-bottom: 5px;
        opacity: .6;

        span {
          margin-right: 10px;
        }
      }

      .button {
        color: #ffffff;
      }
    }

    .right {
      p {
        height: 70px;
        line-height: 70px;
        font-size: 17px;

        span {
          opacity: .6;
        }
      }
    }
  }
}

.page {
  position: fixed;
  bottom: 60px;
}
</style>
